<template>
    <!-- 工具导航 -->
    <main class="wss-container">
        <div class="label-box-content">
            <el-row :gutter="24" type="flex">
                <el-col :span="10">
                    <NewCard title="工具导航" :isright="true">
                        <div class="toolNav">
                            <!-- 切换 -->
                            <div class="tabOne">
                                <div
                                    class="tablist"
                                    :class="status == 1 ? 'isActive' : ''"
                                    @click="status = 1">
                                    <img src="~@/assets/images/manage_nor.svg" class="imgnor" />
                                    <img src="~@/assets/images/manage_sel.svg" class="imgsel" />
                                    <el-button round>经营基础</el-button>
                                </div>
                                <div
                                    class="tablist"
                                    :class="status == 2 ? 'isActive' : ''"
                                    @click="status = 2">
                                    <img src="~@/assets/images/energy_nor.svg" class="imgnor" />
                                    <img src="~@/assets/images/energy_sel.svg" class="imgsel" />
                                    <el-button round>能效提升</el-button>
                                </div>
                                <div
                                    class="tablist"
                                    :class="status == 3 ? 'isActive' : ''"
                                    @click="status = 3">
                                    <img src="~@/assets/images/assess_nor.svg" class="imgnor" />
                                    <img src="~@/assets/images/assess_sel.svg" class="imgsel" />
                                    <el-button round>经营优化</el-button>
                                </div>
                            </div>
                            <!-- 一组 -->
                            <ul v-if="status==1">
                                <li @click="goAmb">
                                    <svg-icon icon-class="budget"/>
                                    <div class="threeTxt">
                                        <p>阿米巴预算</p>
                                        <span>经营从公式开始。科学经营，用问三师阿米巴预算。</span>
                                    </div>
                                    <i class="el-icon-arrow-right"></i>
                                </li>
                                <!-- <li>
                                    <svg-icon icon-class="risk"/>
                                    <div class="threeTxt">
                                        <p>风险测评</p>
                                        <span>企业持续经营离不开风险识别与风险防范。问三师风险测评的开发工具基于先进的风险模型，为客户进行风险管理提供帮助。</span>
                                    </div>
                                    <i class="el-icon-arrow-right"></i>
                                </li> -->
                                <li @click="goSs">
                                    <svg-icon icon-class="tSearch"/>
                                    <div class="threeTxt">
                                        <p>权威解答</p>
                                        <span>关键字搜索官方权威解答。锁定财法税领域，几乎所有问题，都能获得解答。</span>
                                    </div>
                                    <i class="el-icon-arrow-right"></i>
                                </li>
                                <li @click="goZx">
                                    <svg-icon icon-class="cConsult"/>
                                    <div class="threeTxt">
                                        <p>财法税咨询</p>
                                        <span>聚焦于财法税领域，提供线上与线下咨询服务</span>
                                    </div>
                                    <i class="el-icon-arrow-right"></i>
                                </li>
                            </ul>

                            <!-- 一组 -->
                            <ul v-else-if="status==2">
                                <li @click="goXx">
                                    <svg-icon icon-class="study"/>
                                    <div class="threeTxt">
                                        <p>学习</p>
                                        <span>不同的角色需要不同的知识结构，学习型组织是企业持续经营的基本要素。问三师的学习工具是客户打造学习型组织的好帮手。</span>
                                    </div>
                                    <i class="el-icon-arrow-right"></i>
                                </li>
                                <li @click="goHtmb">
                                    <svg-icon icon-class="tem"/>
                                    <div class="threeTxt">
                                        <p>合同模板</p>
                                        <span>拟定合同有模板，等于身边有位专业的法律助手。省时省力省心。</span>
                                    </div>
                                    <i class="el-icon-arrow-right"></i>
                                </li>
                                <li @click="goHtzs">
                                    <svg-icon icon-class="review"/>
                                    <div class="threeTxt">
                                        <p>合同智审</p>
                                        <span>将已经签订或者拟签订的合同上传到问三师，十秒之内系统就会提供智能审核报告，指出合同可能存在的风险要素。</span>
                                    </div>
                                    <i class="el-icon-arrow-right"></i>
                                </li>
                                
                                <!-- <li @click="goWkzx">
                                    <svg-icon icon-class="IntelligentControl"/>
                                    <div class="threeTxt">
                                        <p>文控</p>
                                        <span>文件是公司智慧和经验的载体，文件管理是公司知识管理的必要组成。文控中心是企业知识管理的解决方案。</span>
                                    </div>
                                    <i class="el-icon-arrow-right"></i>
                                </li> -->
                                
                                <!-- <li @click="goRz">
                                    <svg-icon icon-class="expertsCert"/>
                                    <div class="threeTxt">
                                        <p>认证</p>
                                        <span>认证</span>
                                    </div>
                                    <i class="el-icon-arrow-right"></i>
                                </li> -->
                                
                                
                            </ul>

                            <!-- 一组 -->
                            <ul v-else-if="status==3">
                                <!-- <li @click="goMd">
                                    <svg-icon icon-class="loans"/>
                                    <div class="threeTxt">
                                        <p>秒贷</p>
                                        <span>贷款好帮手。三秒多方案，费用千分五。消除信息不对称，实实在在省费用。</span>
                                    </div>
                                    <i class="el-icon-arrow-right"></i>
                                </li> -->
                                <li @click="goXm">
                                    <svg-icon icon-class="flow_icon"/>
                                    <div class="threeTxt">
                                        <p>项目服务</p>
                                        <span>就特定的项目提供综合服务，通常属于疑难杂症</span>
                                    </div>
                                    <i class="el-icon-arrow-right"></i>
                                </li>
                                <li @click="goRl">
                                    <svg-icon icon-class="knownAction1"/>
                                    <div class="threeTxt">
                                        <p>OKA</p>
                                        <span>设定目标及将目标分解为关键任务，并将任务与日历整合，从而提升效能</span>
                                    </div>
                                    <i class="el-icon-arrow-right"></i>
                                </li>
                            </ul>

                        </div>
                    </NewCard>
                </el-col>
                <el-col :span="14">
                    <!-- 推荐内容 -->
                    <FeaturedContent></FeaturedContent>
                </el-col>
            </el-row>
        </div>
    </main>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import FeaturedContent from "@/components/FeaturedContent/index.vue";
export default {
    name: 'toolNav',
    components:{
        NewCard,
        FeaturedContent
    },
    data(){
        return{
            status: 1,//当前激活的
        }
    },
    methods:{
        // 跳转合同模板
        goHtmb(){
            this.$router.push('/Bm-contract/contract')
        },

        // 跳转合同智审
        goHtzs(){
            this.$router.push('/Bm-contract/review')
        },

        // 跳转合同咨询
        goHtzx(){
            this.$router.push({
                path:'/Bm-Consult/1547940371877711872',
                query: {typeId: '1548148623278198784,1548149175030501376'}
            })
        },

        // 跳转秒贷
        goMd(){
            this.$router.push('/Bm-tool/Loans')
        },

        // 跳转阿米巴预算
        goAmb(){
            this.$router.push('/Bm-tool/budget')
        },

        // 跳转文控中心
        goWkzx(){
            this.$router.push('/Bm-contract/IntelligentControl')
        },

        // 跳转日历
        goRl(){
            this.$router.push('/Bm-personalCenter/knownAction')
        },

        // 跳转学习
        goXx(){
            this.$router.push('/Bm-personalCenter/study')
        },

        // 跳转认证
        goRz(){
            this.$router.push('/Bm-personalCenter/expertsCert')
        },

        // 跳转搜搜
        goSs(){
            this.$router.push('/Bm-search/searchAnswer')
        },

        // 跳转项目
        goXm(){
            let routes = this.$router.options.routes
            let project = routes.find(item=>item.path.includes('project'))
            this.$router.push(project.children[0].path)
        },

        // 跳转咨询
        goZx(){
            let routes = this.$router.options.routes
            let project = routes.find(item=>item.path.includes('Consult'))
            this.$router.push(project.children[0].path)
        },
    }
}
</script>

<style lang="scss" scoped>
p,h3,ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}

.label-box-content{
    height: 100%;
    .el-row{
        height: 100%;
        ::v-deep .el-card__body{
            height: 100%;
            padding-bottom: 15px;
            >div{
                height: calc(100% - 45px);
            }
        }
    }
}

// 导航
.toolNav{
    height: 100%;
    h3{
        font-size: 15px;
        color: #293752;
        padding: 15px 0px;
        font-weight: bold;
    }
    ul{
        display: flex;
        flex-direction: column;
        margin: 22px 0;
        height: calc(100% - 163px);
        overflow-y: auto;
        &::-webkit-scrollbar{
            width: 0;
        }
        li{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            width: 100%;
            font-size: 14px;
            padding: 20px;
            border: 1px solid #efefef;
            border-radius: 12px;
            margin-bottom: 22px;
            cursor: pointer;
            svg{
                width: 40px;
                font-size: 38px;
                margin-right: 12px;
            }
            .threeTxt{
                flex: 1;
                p{
                    font-size: 16px;
                    margin: 0;
                }
                span{
                    font-size: 12px;
                    color: #999;
                }
            }
            i{
                width: 16px;
                margin-left: auto;
            }
        }
    }
}
</style>
<style scoped>
/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin-top: 15px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist img {
  width: 36px;
}
.tabOne .tablist img.imgsel {
  display: none;
}
.tabOne .tablist.isActive img.imgsel {
  display: block;
}
.tabOne .tablist.isActive img.imgnor {
  display: none;
}

.tabOne .tablist button {
  color: #686975;
  font-size: 16px;
  /* font-weight: bold; */
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 18px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist.isActive button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #6a769f;
  border-color: #6a769f;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}

/* 无数据 */
.noData-box{
    text-align: center;
    margin-top: 50px;
}
.noData-box img{
    width: 45%;
}
.noData-box>p{
    font-size: 12px;
    font-weight: 400;
    color: #858A91;
    margin-top: 30px;
}
</style>